<template>
  <div class="webchatStatus" :class="[limits.indexOf('call_toolbar') > -1 ? '' : 'webchatStatusStyle']">
    <el-dropdown trigger="click" @command="imStatusChange" size="small" placement="bottom-start">
      <span class="el-dropdown-link">
        <i class="V7_iconfont V7_iconV7tubiao_dian statusIcon" :style="{color: statusColor(imStatusValue)}"></i>
        <i class="V7_iconfont V7_iconV7tubiao_zaixianzhuangtai"></i>
      </span>
      <el-dropdown-menu slot="dropdown" class="plus-popover">
        <el-dropdown-item v-for="(item, index) in imStatusList" :key="index" :command="item">
          <i class="V7_iconfont checkActive" :class="{'V7_iconV7tubiao_gou': checkActive(item)}"></i>
          <i class="V7_iconfont V7_iconV7tubiao_dian" :style="{color: statusColor(item)}"></i>
          {{item.name}}
          <span v-if="checkActive(item)" class="time">{{'：' + timing}}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { storageManager } from '@/utils/common'
import { WebchatModule } from '@/store/modules/webchat'
import { StatusColorObj, CheckActiveObj, ImStatusChangeObj } from '@/views/webchat/webchatInterface'
@Component({
  name: 'webchatStatus'
})
export default class WebchatStatus extends Vue {
  @Prop() private limits
  private $store: any
  private $message: any
  private $bus: any
  private imStatusValue: any = {} // 当前选中的状态

  private webchatStatusTimer: any

  private timing: any = '00:00:00'

  private currentTime: number = 0 // 当前计时

  private imStatusList = [] // 在线自定义状态列表

  private statusColor (item: StatusColorObj) { // 状态颜色
    if (item.status === 'open') {
      return '#008BEE'
    } else if (item.status === 'close') {
      return '#FC6B5C'
    }
  }

  private checkActive (item: CheckActiveObj) { // 当前选中处理
    if (this.imStatusValue._id) { // 刷新页面
      return item._id === this.imStatusValue._id
    } else {
      return this.imStatusValue.status === 'open' ? item.status === 'open' : item.name === '忙碌' // 首次登陆没有状态id，状态开关默认是忙碌
    }
  }

  private imStatusChange (val: ImStatusChangeObj) {
    if (this.imStatusValue._id === val._id) {
      return
    }
    console.log(1111111)
    const actionData = { url: '/im-center/action/user/status/update', method: 'POST', data: { _id: val._id, socketId: this.$store.state.socketIo.lastSocketId } }
    WebchatModule.webchatCommonAction(actionData).then(res => {
      if (res) {
        this.imStatusValue = val
        window.localStorage.setItem('webchatStatus', JSON.stringify(val))
        window.clearInterval(this.webchatStatusTimer)
        this.timing = '00:00:00'
        this.currentTime = 0
        this.timingInterval()
        this.$message.success('变更在线状态成功')
      }
    })
  }

  private startTimer (countTimer: any) {
    let minute: any
    let hour: any
    countTimer = 1 + parseInt(countTimer, 10)
    hour = countTimer / 3600
    hour = parseInt(hour, 10)
    minute = (countTimer % 3600) / 60
    minute = parseInt(minute, 10)
    const second = (countTimer % 3600) % 60
    let mtime = (hour < 10) ? '0' + hour : hour
    mtime += ':'
    mtime += (minute < 10) ? '0' + minute : minute
    mtime += ':'
    mtime += (second < 10) ? '0' + second : second
    return mtime
  }

  private timingInterval () { // 正计时
    if (this.webchatStatusTimer !== null) {
      window.clearInterval(this.webchatStatusTimer)
      this.webchatStatusTimer = window.setInterval(() => {
        this.timing = this.startTimer(this.currentTime)
        this.currentTime = this.currentTime - 0 + 1
      }, 1000)
    }
  }

  private mounted () {
    this.imStatusValue = JSON.parse(storageManager.get('webchatStatus')) ? JSON.parse(storageManager.get('webchatStatus')) : {}
    WebchatModule.webchatCommonAction({ url: '/im-center/action/user/status/cache', method: 'POST' }).then((statuts: any) => { // 在线自定义状态
      if (statuts && statuts.data) {
        this.imStatusList = statuts.data
      }
    })
    this.timingInterval()
  }
}
</script>
<style lang="stylus" scoped>
  .webchatStatus
    margin-left 20px
    display flex
    .el-dropdown-link
      position relative
      cursor pointer
      .statusIcon
        position absolute
        color #008BEE
        top -10px
        right -8px
    .V7_iconV7tubiao_zaixianzhuangtai
      color #3D4E66
      font-size 18px
  .checkActive
    width 12px
    display inline-block
  .time
    display inline-block
    width 80px
  .webchatStatusStyle
    width calc(100% - 10px)
</style>
